<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="test">尚硅谷IT教育</div>

    <div id="demo">
      <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
      </ul>
    </div>

    <!--
      1. [].slice.call(lis): 将伪数组转换为真数组
      2. node.nodeType: 得到节点类型
      3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)
      4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
      5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
      6. DocumentFragment: 文档碎片(高效批量更新多个节点)
      -->

    <script type="text/javascript">
      // 1. [].slice.call(lis): 将伪数组转换为真数组

      // 常见的伪数组：arguments NodeList
      function fn() {
        // console.log(arguments);
        // console.log(Array.from(arguments)); // ES6
        console.log([].slice.call(arguments));
      }
      fn(1, 2, 3, 4);
      // 2. node.nodeType: 得到节点类型
      // nodeType 1 元素节点
      // nodeType 3 文本节点
      const div = document.getElementById("demo");
      console.log(div.nodeType); // 1 是元素节点

      // 3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)
      const person = {
        firstName: "li",
        lastName: "peihua",
      };

      Object.defineProperty(person, "fullName", {
        // writable: true, // 是否可写
        enumerable: true, // 是否可枚举（被 for in）
        configurable: false, // 是否可以重新配置或删除
        get() {
          // 读取
          return this.firstName + "-" + this.lastName;
        },
        set(val) {
          // 设置
          cosnt[(firstName, lastName)] = val.split("-");
          this.firstName = firstName;
          this.lastName = lastName;
        },
      });

      // 4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
      console.log(Object.keys(person));
      // 5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
      person.__proto__.a = 123;
      console.log(person.a);
      console.log(person.hasOwnProperty("firstName"));
      console.log(person.hasOwnProperty("a"));

      for (key in person) {
        if (person.hasOwnProperty(key)) {
          console.log(key);
        }
      }
      // 6. DocumentFragment: 文档碎片(高效批量更新多个节点)
      const fragment = document.createDocumentFragment();
      const demo = document.getElementById("demo");
      // 将页面元素添加到文档碎片中
      fragment.appendChild(demo);

      [].slice.call(fragment.children[0].children[0].children).forEach((li) => {
        li.textContent += "~~~";
      });

      // 将文档碎片添加页面中生效
      document.body.appendChild(fragment);
    </script>
  </body>
</html>
